<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H_Tool - 自制工具集</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-6 py-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <i class="fa fa-wrench text-blue-600 text-2xl"></i>
                    <h1 class="text-2xl font-bold text-gray-800">H_Tool</h1>
                </div>
                <div class="text-sm text-gray-500">
                    <span id="current-date"></span>
                </div>
            </div>
            <p class="mt-4 text-gray-600">自制的一些实用小工具集合</p>
        </div>
    </header>

    <main class="container mx-auto px-6 py-12">
        <section class="mb-12">
            <h2 class="text-xl font-semibold text-gray-700 mb-6">可用工具</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 大疆无人机GPS查看器 -->
                <a href="大疆无人机GPS等信息查看器/index.html" class="tool-card transition-all duration-300">
                    <div class="bg-white rounded-lg shadow-md p-6 h-full border border-gray-100">
                        <div class="flex items-center mb-4">
                            <i class="fa fa-camera text-blue-500 text-xl mr-3"></i>
                            <h3 class="text-lg font-medium text-gray-800">大疆无人机GPS信息查看器</h3>
                        </div>
                        <p class="text-gray-600 text-sm">
                            查看无人机照片的经度、纬度、高度，镜头朝向等EXIF信息
                        </p>
                    </div>
                </a>
                
                <!-- 未来可添加更多工具 -->
                <div class="bg-gray-50 rounded-lg p-6 border-2 border-dashed border-gray-200 flex items-center justify-center">
                    <p class="text-gray-400 text-center">
                        <i class="fa fa-plus-circle text-lg mr-2"></i>
                        更多工具开发中...
                    </p>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-6 text-center text-gray-500 text-sm">
            <p id="copyright">© H_Tool 自制工具集</p>
        </div>
    </footer>

    <script>
        // 显示当前日期
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        document.getElementById('current-date').textContent = `${year}年${month}月${day}日`;
        
        // 更新版权年份
        document.getElementById('copyright').textContent = `© ${year} H_Tool 自制工具集`;
    </script>
</body>
</html>
